<template>
    <div class="detail_cinemas_container">
      <div class="cinemas_list_wrap" v-for="item in cinemas" :key="item.id" @click="tocinemaTicket(item)">
            <div class="cinema_title">
              <div class="cinema_nm">{{item.nm}}</div>
              <div class="cinema_price"><span>{{item.sellPrice}}</span><span>元</span><span>起</span></div>
            </div>
            <div class="cinema_addrs"><span >{{item.addr}}</span><span>{{item.distance}}</span></div>
            <div class="cinema_tag_wrpper"  >
                <span  v-if="item.tag.allowRefund">退票</span>
                <span  v-if="item.tag.endorse">改签</span>
                <span  v-if="item.tag.snack">小吃</span>
                <template v-if="item.tag.hallTypeVOList.length">
                      <span  v-for="(data,index) in item.tag.hallTypeVOList" :key="index">{{data.name}}</span>
                </template>
                <span v-if="item.tag.vipTag">{{item.tag.vipTag}}</span>
            </div>
            <div class="card" v-if="item.promotion.cardPromotionTag">
                <img src="@/assets/images/card.png" alt=""><span>{{item.promotion.cardPromotionTag}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: ['cinemas', 'cinemaDetail'],
  beforeMount () {
    console.log(this.cinemas)
  },
  methods: {
    tocinemaTicket (item) {
      this.$router.push({ path: '/cinemaTicket', query: { cinemaId: item.id, movieId: this.cinemaDetail.id } })
    }
  }
}
</script>
<style scoped>

.detail_cinemas_container{width: 100%;display: flex;flex-direction: column}
.show_days{width: 100%;display: flex;flex-direction: row;justify-content: flex-start;overflow: auto;font-size: 14px;text-align: center;color: #666666;}
.day{width: 33.3%;flex-shrink: 0;padding:10px 15px;margin-left:2px;border-bottom: 2px solid #f03d37}

.show_nav{width: 100%;display: flex;flex-direction: row;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;color: #777777;font-size: 13px;position: relative;}
.nav_tools{width: 33.3%;margin:10px 0;text-align: center;border-left: 1px solid #f2f2f2;}
.nav_tools::after{content:'';width: 0;height: 0;border: 5px solid;border-color: #999999 transparent transparent;position: absolute;top: 16px;margin-left:2px }
/* .card{height: 15px} */

</style>
